<template>
    <div class="team-division">
      <h2>团队成员及分工</h2>
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>任务</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(member, index) in teamMembers" :key="index">
            <td>{{ member.name }}</td>
            <td>{{ member.task }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue';
  
  // 定义团队成员数据
  const teamMembers = reactive([
    { name: "张三", task: "用户管理" },
    { name: "李四", task: "前端开发" },
    { name: "王五", task: "后端开发" },
    { name: "赵六", task: "测试与部署" }
  ]);
  </script>
  
  <style scoped>
  .team-division {
    margin: 20px auto;
    padding: 20px;
    max-width: 600px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
  }
  h2 {
    color: #333;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  </style>